<!-- 
 * @description: 
 * @fileName: index.vue 
 * @author: 自己的名字 
 * @date: 2025-07-21 09:13:20
 * @version: V1.0.0 
!-->
<script setup lang='ts'>
const props = defineProps({
    list: {
        type: Array,
        required: true,
        default: new Array() as any
    }
})
const emit = defineEmits(['change'])

const open = () => { //监听组件显示 （隐藏TabBar和NavigationBar，隐藏video原生组件）
    // uni.hideTabBar()
    // uni.setNavigationBarColor({
    //  frontColor: '#000000', // 设置前景色为黑色
    //  backgroundColor: '#000000', // 设置背景色为黑色
    // })
    // data.videoShow = false 
}

const close = () => { //监听组件隐藏 （显示TabBar和NavigationBar，显示video原生组件）
    // uni.showTabBar()
    // uni.setNavigationBarColor({
    //  frontColor: '#ffffff', // 设置前景色为白色
    //  backgroundColor: '#000000', // 设置背景色为黑色
    // })
    // data.videoShow = true
}
</script>
<template>
    <swiper class="w-full h-[58vh]" :display-multiple-items="1" :autoplay="false" :circular="false"
        :indicator-dots="true" indicator-color="#fff" indicator-active-color="#2196F3">
        <swiper-item v-for="(listItem, index) in props.list" :key="index">
            <view class="grid grid-cols-3 gap-4 p-4">
                <view v-for="(item, index) in listItem" :key="index"
                    class="w-full h-[50vh] flex flex-col justify-center items-center bg-white rounded-md"
                    style="background: rgba(255, 255, 255, 0.6);">
                    <image :src="item.url" mode="aspectFit" class="w-full" />
                </view>
            </view>
        </swiper-item>
    </swiper>
    <q-previewImage ref="previewImage" :urls="props.list" @open="open" @close="close"></q-previewImage>
</template>


<style scoped lang='scss'>
:deep(.uni-swiper-dot) {
    width: 24px;
    height: 8px;
    border-radius: 0
}
</style>